<template>
  <div class="msgOrder">
    <!-- ========修改弹窗======-->
    <!--、、管理岗订单：审核开票-->
    <!--、、公司-->
    <div>
      <el-dialog
        title="审核开票"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.customerType === 1"
        :before-close="handleClose">
        <!--// 公司客户-->
        <div :span="24">
          <el-form ref="formData1" :model="formData1" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：" >
                  <el-input v-model="form1.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form1.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form1.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="公司名称：">
                  <el-input v-model="form1.customerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" class="itemNum">
                <el-form-item label="税号/统一社会信用代码：" >
                  <el-input v-model="form1.creditCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="开户行：">
                  <el-input v-model="form1.bankOfDeposit" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="账号：">
                  <el-input v-model="form1.account" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="公司电话：">
                  <el-input v-model="form1.customerPhone" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23">
                <el-form-item label="公司地址：">
                  <el-input v-model="form1.customerAddress" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row >
              <el-col :span="11" >
                <el-form-item label="营业执照：">
                  <div>
                    <a :href=" imgUrl + form1.businessLicenceUrl" target="_blank">{{ form1.businessLicenceUrl || ''}}</a>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="公司开票：">
                  <div>
                    <a :href=" imgUrl + form1.billingInformationUrl" target="_blank">{{ form1.billingInformationUrl || ''}}</a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: -20px">
                <el-form-item label="备注：">
                  <div>{{ form1.remarks }}</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" class="itemVIN" style="margin-top: -28px">
                <el-form-item label="VIN码：">
                  <div v-for="(item, index) in form1.vinCodes" :key="index">
                    <el-col :span="10"><a :href=" imgUrl + item " target="_blank">{{ item || '' }}</a></el-col>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="订单台数：">
                  <el-col :span="10">{{ form1.orderTotalNumber || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="单价（万元）：">
                  <el-col :span="10">{{ form1.commodityUnitPrice || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="总价（万元）：">
                  <el-col :span="10">{{ form1.totalOrderPrice || '' }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" class="itemConfirm itemNum" style="margin-top: -15px">
                <el-form-item label="管理岗确认情况：" prop="auditStatus">
                  <el-radio-group v-model="formData1.auditStatus">
                    <el-radio :label="1">确认</el-radio>
                    <el-radio :label="0">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="+formData1.auditStatus === 0">
              <el-col :span="23" style="margin-top: -10px">
                <el-form-item label="驳回原因：" prop="remarks">
                  <el-input type="textarea" v-model="formData1.remarks" :maxlength="length.max100" placeholder="请填写原因"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、个人-->
    <div>
      <el-dialog
        title="审核开票"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.customerType === 2"
        :before-close="handleClose">

        <!--// 个人客户-->
        <div :span="24">
          <el-form  ref="formData1" :model="formData1" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form2.orderCode " placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form2.saleName" placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" >
                <el-form-item label="经纪人：" >
                  <el-input v-model="form2.brokerName " placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!--// 客户管理-->
            <el-row>
              <el-col >
                <el-tabs v-model="activeName">
                  <el-tab-pane :label="'客户'+ (index + 1)" :span="24" :name="String(index)" v-for="(item, index) in form2.customers" :key="index">
                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="个人姓名：" >
                          <el-input v-model="item.customerName" placeholder=""  disabled></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="11" :offset="1">
                        <el-form-item label="个人电话：" >
                          <el-input v-model="item.customerPhone" placeholder=""  disabled></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="身份证号：" >
                          <el-input v-model="item.customerIdCard" placeholder=""  disabled></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="身份证正面：">
                          <a href="imgUrl + item.customerBackUrl" target="_blank">{{ item.customerBackUrl || ''}}</a>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11" :offset="1">
                        <el-form-item label="身份证反面：">
                          <a href="imgUrl + item.customerFrontUrl" target="_blank">{{ item.customerFrontUrl || ''}}</a>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="23"  style="margin-top: -30px;">
                        <el-form-item label="附加照片：" class="itemZp" >
                          <div><a href=" imgUrl + item.annexI " target="_blank">{{ item.annexI || ''}}</a></div>
                          <div style="line-height: 18px;margin-top: -10px;"><a href=" imgUrl + item.annexII " target="_blank">{{ item.annexII || ''}}</a></div>
                          <div style="line-height: 18px;"><a href=" imgUrl + item.annexIII " target="_blank">{{ item.annexIII || '' }}</a></div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>

              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: -20px">
                <el-form-item label="备注：">
                  <div>{{ form2.remarks }}</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" class="itemVIN" style="margin-top: -28px">
                <el-form-item label="VIN码：">
                  <div v-for="(item, index) in form2.vinCodes" :key="index">
                    <el-col :span="10"><a :href=" imgUrl + item " target="_blank">{{ item || '' }}</a></el-col>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="订单台数：">
                  <el-col :span="10">{{ form2.orderTotalNumber || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="单价（万元）：">
                  <el-col :span="10">{{ form2.commodityUnitPrice || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="总价（万元）：">
                  <el-col :span="10">{{ form2.totalOrderPrice || '' }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" class="itemConfirm itemNum" style="margin-top: -15px">
                <el-form-item label="管理岗确认情况：" prop="auditStatus">
                  <el-radio-group v-model="formData1.auditStatus">
                    <el-radio :label="1">确认</el-radio>
                    <el-radio :label="0">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="+formData1.auditStatus === 0">
              <el-col :span="23" style="margin-top: -10px">
                <el-form-item label="驳回原因：" prop="remarks">
                  <el-input type="textarea" v-model="formData1.remarks" :maxlength="length.max100" placeholder="请填写原因"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import * as api from '@/api/order'
  import { Message } from 'element-ui'
  import { mapState } from 'vuex'

  export default {
    props: {
      updateMsg: {
        type: Object
      }
    },
    data() {
      return {
        loading: false,
        disabled: '',
        modelTitle: '修改',
        dialogVisible: true,
        activeName: '0',
        length: {
          max10: 10,
          max14: 14,
          max18: 18,
          max20: 20,
          max50: 50,
          max60: 60,
          max100: 100
        },
        form1: {
          remarks: ''
        },
        formData1: {
          orderId: '',
          auditStatus: undefined,
          remarks: ''
        },
        form2: {
          customers: [],
          remarks: ''
        },
        formData2: {
          orderId: ''
        },
        rules: {
          remarks: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          auditStatus: [
            { required: true, message: '必填项，不能为空', trigger: 'change' }
          ]
        }
      }
    },
    watch: {
      dialogVisible() {
        if (this.$refs.formModel) {
          this.$refs.formModel.clearValidate()
        }
      }
    },
    components: {
    },
    created() {
      this.getlist()
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url
      })
    },
    methods: {
      getlist() {
        var orderId = { orderId: +this.updateMsg.id }
        if (+this.updateMsg.customerType === 1) {
          // 获取--审核开票(公司)
          api.getCompanyModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form1 = res.data
            }
          })
        } else if (+this.updateMsg.customerType === 2) {
          // 获取--审核开票(个人)
          api.getPersonalModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form2 = res.data
            }
          })
        }
      },
      // 保存--审核开票
      auditOpeninvoiceSave() {
        this.formData1.orderId = +this.updateMsg.id
        this.$refs['formData1'].validate((valid) => {
          if (valid) {
            api.auditOpeninvoiceSave(this.formData1).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            }).catch(err => {
              if (+err.code === 1020) {
                Message({
                  message: '该订单状态已改变，请关闭对话框并刷新订单列表',
                  type: 'warning',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      submitForm() {
        this.auditOpeninvoiceSave()
      },
      handleClose(done) {
        this.updateMsg.code = -1
      },
      handleClick() {
        console.log(1)
      }
    }
  }
</script>
<style lang="scss">
  .msgOrder {
    position: relative;
    padding: 20px;
    .itemNum {
      .el-form-item__label {
        line-height: 18px;
      }
    }
    .el-dialog {
      min-width: 800px;
      .el-form-item__label {
        width: 120px!important;
      }
      .el-form-item__content {
        margin-left: 120px!important;
      }
      .main {
        max-height: 600px;
        overflow-y: auto;
      }
      .itemVIN {
        .el-form-item__content {
          margin-top: 8px;
        }
        .el-col-10 {
          line-height: 20px;
        }
      }
    }
    .el-table {
      .el-table__body-wrapper {
        height: 100%;
        overflow-x: inherit;
      }
    }
    .el-tabs__nav {
      margin-left: 30px;
    }
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>
